<template>
    <div class="app-container">
        <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
            label-width="120px">
            <h2 style="text-align: center">标准宣贯</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="新标准名称代号" prop="newStandardCode">
                        <!-- <el-input v-model="formData.newStandardCode" placeholder="请输入新标准名称代号" clearable
                            :style="{ width: '100%' }">
                        </el-input> -->
                        <el-select v-model="formData.newStandardCode" filterable value-key="standardManagerId"
                            @change="newChange" placeholder="请选择文件类型" clearable :style="{ width: '100%' }">
                            <el-option v-for="dict in newForm" :key="dict.standardManagerId" :label="dict.standardName"
                                :value="dict" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检测部门" prop="deptId">
                        <!-- multiple: true, -->
                        <el-cascader :props="{ value: 'id', multiple: true, checkStrictly: true }" @change="changeDept"
                            clearable :show-all-levels="false" ref="reference" placeholder="请选择检测部门"
                            :style="{ width: '100%' }" v-model="formData.deptId" :options="deptOptions"></el-cascader>

                        <!-- <el-cascader  ref="reference" :style="{ width: '100%' }"
              :props="{ value: 'id', checkStrictly: true, multiple: true }" :value-format="valueFormat"
              :show-all-levels="false" placeholder="请选择部门" v-model="formData.deptId" :options="deptOptions"
              @change="changeCascader" @visible-change="visibleChange($event, scope.$index)"></el-cascader> -->
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="formData.deptId">
                    <el-form-item label="填表人" prop="userId">
                        <UserDialog :typeValue="Array.isArray(formData.deptId)
                            ? formData.deptId.toString()
                            : formData.deptId
                            " :disabled="$route.query.isInfo || isInfo" v-model="formData.userId" @change="changeUser">
                        </UserDialog>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="填表人" prop="userId">
                        <UserDialog placeholder="请输入考核人" @change="changecheckeUser" v-model="formData.userId"></UserDialog>
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="旧标准名称代号" prop="oldStandardCode">
                        <el-input v-model="formData.oldStandardCode" placeholder="请输入旧标准名称代号" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="新标准发布日期" prop="pushDate">
                        <el-date-picker v-model="formData.pushDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择新标准实施日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="新标准实施日期" prop="executiveDate">
                        <el-date-picker v-model="formData.executiveDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择新标准实施日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="标准内容更新情况" prop="changeContent">
                        <el-input v-model="formData.changeContent" placeholder="请输入标准内容更新情况" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <h4 class="form-header h4">执行新标准准备情况</h4>
            <el-row :gutter="15">

                <el-col :span="8">
                    <el-form-item label="人员配备" prop="manning">
                        <el-input v-model="formData.manning" placeholder="请输入人员配备" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设备配置" prop="equipment">
                        <el-input v-model="formData.equipment" placeholder="请输入设备配置" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="器具耗材" prop="applianceConsumables">
                        <el-input v-model="formData.applianceConsumables" placeholder="请输入器具耗材" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="环境条件" prop="environment">
                        <el-input v-model="formData.environment" placeholder="请输入环境条件" clearable :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="人员培训" prop="personalTraining">
                        <el-input v-model="formData.personalTraining" placeholder="请输入人员培训" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检测软件" prop="detectionSoftware">
                        <el-input v-model="formData.detectionSoftware" placeholder="请输入检测软件" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业指导书" prop="jobInstruction">
                        <el-input v-model="formData.jobInstruction" placeholder="请输入作业指导书" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="原始观测数据记录表" prop="originalRecord">
                        <el-input v-model="formData.originalRecord" placeholder="请输入原始观测数据记录表" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检验检测记录表" prop="detectionRecord">
                        <el-input v-model="formData.detectionRecord" placeholder="请输入检验检测记录表" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检验检测报告" prop="detectionReport">
                        <el-input v-model="formData.detectionReport" placeholder="请输入检验检测报告" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <h4 class="form-header h4">附件</h4>
            <el-form-item label="" prop="attachmentUrl" style="position: relative">
                <!-- <img v-if="$route.query.isInfo" src="@/assets/images/watermark.png" style="width: 200px; position: absolute"
                    :style="{
                        top: Math.random() * 45 - 30 + 'px',
                        right: Math.random() * 90 + 30 + 'px',
                        transform: 'rotate(' + Math.abs(Math.random() * 45 - 360) + 'deg)',
                    }" /> -->
                <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.attachmentUrl"></FileUpload>
            </el-form-item>

            <el-col :span="24">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm(1)">提交</el-button>
                    <el-button v-if="!($route.query.isInfo || isInfo) && formData.status != 'end'" type="primary"
                        @click="submitForm(0)">暂存</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import {
    standardChangeAdd,
    updategStandardChange,
    standardChangeInfo,
} from "@/api/system/standard.js";
import { deptTreeSelect } from "@/api/system/user.js";
import { unChangelist } from "@/api/system/standard.js";
export default {
    components: {},
    dicts: [
        "sys_standard_level",
        "sys_standard_area",
        "sys_standard_nature",
        "sys_standard_content",
        "sys_metering_status",
        "sys_availability_type",
    ],

    props: [],
    data() {
        return {
            formData: {
                userId: undefined,
                levelValue: undefined,
                oldStandardCode: undefined,
                equipment: undefined,
                natureValue: undefined,
                contentValue: undefined,
                effectValue: undefined,
                calculateValue: undefined,
                applianceConsumables: undefined,
                environment: undefined,
                personalTraining: undefined,
                isApplyValue: undefined,
                detectionSoftware: undefined,
                jobInstruction: undefined,
                originalRecord: undefined,
                detectionRecord: undefined,
                detectionReport: undefined,
                executiveDate: null,
                publicityDate: null,
                pushDate: null,
                manning: "",
                newStandardCode: "",
                changeContent: undefined,
            },
            deptOptions: [],
            newForm: {},
            rules: {
                deptId: [
                    {
                        required: true,
                        message: "请选择检测部门",
                        trigger: "change",
                    },
                ],
                detectionSoftware: [
                    {
                        required: true,
                        message: "请输入检测软件",
                        trigger: "blur",
                    },
                ],
                jobInstruction: [
                    {
                        required: true,
                        message: "请输入作业指导书",
                        trigger: "blur",
                    },
                ],
                originalRecord: [
                    {
                        required: true,
                        message: "请输入原始观测数据记录表",
                        trigger: "blur",
                    },
                ],
                detectionRecord: [
                    {
                        required: true,
                        message: "请输入检验检测记录表",
                        trigger: "blur",
                    },
                ],
                detectionReport: [
                    {
                        required: true,
                        message: "请输入检测报告",
                        trigger: "blur",
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择填表人",
                        trigger: "change",
                    },
                ],
                // levelValue: [
                //     {
                //         required: true,
                //         message: "请选择文件类型",
                //         trigger: "change",
                //     },
                // ],
                environment: [
                    {
                        required: true,
                        message: "请输入环境条件",
                        trigger: "change",
                    },
                ],
                personalTraining: [
                    {
                        required: true,
                        message: "请输入人员培训",
                        trigger: "change",
                    },
                ],
                attachmentUrl: [
                    {
                        required: false,
                        message: "附件不能为空",
                        trigger: "change",
                    },
                ],
                oldStandardCode: [
                    {
                        required: true,
                        message: "请输入旧标准名称代号",
                        trigger: "blur",
                    },
                ],
                equipment: [
                    {
                        required: true,
                        message: "请输入设备配置",
                        trigger: "change",
                    },
                ],
                applianceConsumables: [
                    {
                        required: true,
                        message: "请输入器具耗材",
                        trigger: "change",
                    },
                ],
                calculateValue: [
                    {
                        required: true,
                        message: "请选择计量状态",
                        trigger: "change",
                    },
                ],
                executiveDate: [
                    {
                        required: true,
                        message: "请选择发布日期",
                        trigger: "change",
                    },
                ],
                publicityDate: [
                    {
                        required: false,
                        message: "请选择宣贯日期",
                        trigger: "change",
                    },
                ],
                pushDate: [
                    {
                        required: true,
                        message: "请选择新标准发布日期",
                        trigger: "change",
                    },
                ],
                changeContent: [
                    {
                        required: true,
                        message: "请输入标准内容更新情况",
                        trigger: "blur",
                    },
                ],
                manning: [
                    {
                        required: true,
                        message: "请输入人员配备",
                        trigger: "blur",
                    },
                ],
                newStandardCode: [
                    {
                        required: true,
                        message: "请输入新标准名称代号",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    created() {
        if (this.$route.query.isEdit || this.$route.query.isInfo) {
            this.getinfo();
        }
        this.getDeptTree();
    },
    mounted() {
        this.listStandard()
    },
    methods: {
        getinfo() {
            standardChangeInfo(this.$route.query.id).then((response) => {
                this.formData = response.data;
                let list1 = [];
                // item.deptIdReplace = item.deptId
                // item.deptNameReplace = item.deptName
                this.formData.deptId =  this.formData.deptId.split(",");
                this.formData.deptId =  this.formData.deptId.map((i) => parseInt(i));
                this.formData.deptId.map((i) => {
                    list1.push(this.findParentLot(i));
                });
                this.formData.deptId = list1;
            });
        },
        // 创建新数组 返回
        findParentLot(id) {
            const arr = []
            this.deployIdFun(this.deptOptions, id, arr)
            return arr.reverse()
        },
        // 逻辑代码 for循环 判断相同的id 取上级ID
        deployIdFun(options, id, newArr) {
            console.log(options);
            options.forEach((v) => {
                if (v.id === id) {
                    newArr.push(id)
                    console.log(newArr, 'newArr');
                    if (!v.parentId || v.parentId !== '0') {
                        this.deployIdFun(this.deptOptions, v.parentId, newArr)
                    }
                } else {
                    if (v.children && v.children.length) {
                        this.deployIdFun(v.children, id, newArr)
                    }
                }
            })
        },
        listStandard() {
            unChangelist().then((res) => {
                this.newForm = res.data
            })
        },
        newChange(e) {
            console.log(e);
            this.formData = e
            this.formData.newStandardCode = e.standardName
            this.formData.changeContent = e.contentName
            this.formData.oldStandardId = e.standardManagerId
            this.formData.createTime = ''
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
                console.log(this.deptOptions);
                this.formData.deptId = store.state.user.dept.deptId
            });
        },
        changeUser(e) {
            console.log(e, './././');
            this.formData.userName = e.userName;
            this.formData.nickName = e.nickName;
        },
        changeDept(e) {
            console.log(e);
            this.formData.userId = "";
        },
        submitForm(e) {
            let query = JSON.parse(JSON.stringify(this.formData));
            if (query.status != 'end') {
                query.status = e == 0 ? 'draft' : 'audit'
            }
            if (query.deptId) {
                query.deptId = this.$refs.reference.getCheckedNodes().map((i) => { return i.value }).toString();
                query.deptName = this.$refs.reference.getCheckedNodes().map((i) => { return i.label }).toString();
            }

            if (e == 0) {
                if (!this.formData.newStandardCode) {
                    this.$message.warning("请先选择新标准名称代号");
                    return;
                }
                if (this.formData.standardChangeId != undefined) {
                    updategStandardChange(query).then((response) => {
                        this.$modal.msgSuccess("修改成功");
                        this.resetForm();
                    });
                } else {
                    standardChangeAdd(query).then((response) => {
                        this.$modal.msgSuccess("新增成功");
                        this.resetForm();
                    });
                }
                return
            }
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    // query.levelName = this.dict.type.sys_standard_level.find(
                    //     (i) => i.value === query.levelValue
                    // ).label;

                    // query.domainName = this.dict.type.sys_standard_area.find(
                    //     (i) => i.value === query.equipment
                    // ).label;
                    // query.natureName = this.dict.type.sys_standard_nature.find(
                    //     (i) => i.value === query.natureValue
                    // ).label;
                    // query.contentName = this.dict.type.sys_standard_content.find(
                    //     (i) => i.value === query.contentValue
                    // ).label;
                    // query.effectName = this.dict.type.sys_availability_type.find(
                    //     (i) => i.value === query.effectValue
                    // ).label;
                    // query.calculateName = this.dict.type.sys_metering_status.find(
                    //     (i) => i.value === query.calculateValue
                    // ).label;
                    // query.deptId = this.$refs.reference.getCheckedNodes().map((i) => { return i.value }).toString();
                    // query.deptName = this.$refs.reference.getCheckedNodes().map((i) => { return i.label }).toString();
                    if (this.formData.standardChangeId != undefined) {
                        updategStandardChange(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        standardChangeAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                } else {
                    console.log('/////');
                }
            });
        },
        resetForm() {
            const obj = { path: "./staProImp" };
            this.$tab.closeOpenPage(obj);
        },
    },
};
</script>
  